@charset "utf-8";
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
//头部导航开始
.navbar{
    width:100%;
    height:50px;
    background: #222222;
    border:none;
    border-radius: 0;
    box-sizing: border-box;
    margin-bottom:0;
    position:fixed;
    z-index: 999;
    top:0;
    
    
    .active{
        background: #080808;
    }
    //logo部分开始
    .navbar-header{       
        .navbar-brand{
            line-height: 50px;
            img{
                 display:inline-block;
            }          
            padding-top:0;
            padding-bottom:0;
        }
    }
    //logo部分开始
    #navbar .navbar-nav select{
       font-size: 14px;
       border:0;
       background:  #222222;
       color: #9d9d9d;
       width: 108px;
       height:50px;
       outline: none;
       cursor: pointer;
       text-align: center;
       font-weight:bold; 
       &:hover{
           color: white;
       }
       option{
           outline: none;
           background: white;
           color:black;
           border:none;
           &:hover{
               background: black;
           }
       }  
    }
    #navbar .navbar-nav > li > a {
        color: #9d9d9d;
        &:hover{
            color:white;
            background: none;
        }
    }
    .navbar-nav > .active > a{
        background: #080808;
        
    }
}
//头部导航结束


//中间主体内容部分开始
#family-content{
    margin-top:50px;
}
//banner部分开始
.about-banner{
    img{
        width:100%;
    }
}
//banner部分结束

//公司简介部分开始
.company{
    border-top:1px solid transparent;
    padding:20px 0;
    .company-title{
        h2{
            font-size: 20px;
            font-weight: bold;
        }
        .title-p{
            font-size: 16px;
            font-weight: bold;
        }
    }
    .company-left{
        
        p{
            font-size: 14px;
        }
    }
    .company-right{
        img{
            width:100%;
            margin-top:0px;
            &:hover{
                opacity: 0.8;
            }
        }
    }
}

//公司简介部分结束

//人才招聘部分开始
.personnel{
    background: #8cc11f;
    padding:30px 0;
    .personnel-left{
        h2{
        font-size: 20px;
        font-weight: bold;
        }
        p{
           font-size: 14px; 
        }
    }
    .personnel-right{
        div{
            width:140px;
            height:30px;
            background: #ffffff;
            color:#8cc11f;
            text-align: center;
            line-height: 30px;
            border-radius: 6px;
            font-size:14px;
            margin-bottom: 7px;
            cursor: pointer;
        }
    }
    
}
//人才招聘部分结束

//招聘信息部分开始
.recruit{
    .recruit-box{
        padding-bottom:10px;
        border-bottom:1px solid #d2d2d2;
    }
    padding:20px 0;
    h3{
        font-size: 25px;
        color:#add271;
        margin-bottom: 30px;
    }
    .rectuit-content{
        ul{
            li{
                list-style: decimal;
            }
        }
        h4{
            font-size: 18px;
            
        }
        p{
            font-size: 14px;
            
            line-height: 30px;
        }
    }
}

//招聘信息部分结束

//联系方式部分开始
.contact{
    h3{
        font-size: 18px;
   
    }
    .contact-box{
        border:1px solid #e3e3e3; 
        margin-bottom: 20px;
        img{
           width:35px;
           height:35px; 
           margin-top:10px;          
        }
        p{
            font-size: 12px;
            line-height: 35px;
            margin-top:10px;
            padding-left:14px;
        }
        
    }
}

//联系方式部分结束

//中间主体内容部分结束






//底部部分开始
footer{
    padding-top:r(10);
    padding-bottom:r(10);
    background: #3b3b3b;

    img{
        cursor: pointer;
    }
    .footer-left{
        margin-top:r(20);
        span{
            font-size: r(14);
            color:#a1a3ab;
        }
        p{
            font-size: r(12);
            color:#a1a3ab;
        }
    }
    .footer-right{
        margin-top:r(20);
        img{
            margin-left:r(10);
        }
        .wx{
            position:relative;
            .er{
                position:absolute;
                top:-160px;
                left:7px;
                display:none;
                
            }
        }       
    }       
}
//底部部分结束


//媒体查询部分

@media screen and (min-width:970px){
    //调整footer部分的相关元素
    footer{
        .footer-left{
            margin-top:15px;
            span{font-size: 14px;}
            p{font-size: 12px;}
        }
        .footer-right{
            margin-top:15px;
        }
    }
     //公司简介部分开始
    .company{
        padding:60px 0;
        .company-title{
             h2{
                font-size: 35px;
            }
            .title-p{
                font-size: 25px;
                font-weight: 400;
            }
        }
        .company-left{         
            p{
                font-size: 16px;
                text-indent: 32px;
                line-height: 25px;
                text-align: justify;
            }
        }
        .company-right{
            img{
                width:100%;
               
            }
        }
    }
    //公司简介部分结束
    
     //人才招聘部分开始
    .personnel{
        padding:60px 0;
        .personnel-left{
            h2{
            font-size: 26px;
            font-weight: bold;
            }
            p{
               font-size: 18px; 
            }
        }
        .personnel-right{
            margin-top:20px;
            div{
                width:220px;
                height:50px;
                background: #ffffff;
                color:#8cc11f;
                text-align: center;
                line-height: 50px;
                border-radius: 6px;
                font-size:18px;
                margin-bottom: 7px;
            }
        }
        
    }
    //人才招聘部分结束
    
    //招聘信息部分开始
    .recruit{
        .recruit-box{
            padding-bottom:30px;
        }
        padding:20px 0;
        h3{
            font-size: 25px;
            margin-bottom: 30px;
        }
        .rectuit-content{
            margin-bottom:50px;
            h4{
                font-size: 20px;
                
            }
            p{
                font-size: 15px;
                text-indent: 20px;
            }
        }
    }
    
    //招聘信息部分结束
    
    //联系方式部分开始
    .contact{
        h3{
            font-size: 34px;
        }
    }
    
    //联系方式部分结束
}

@media screen and (max-width:767px){
    //设置手机端时导航条的样式
   .navbar-nav{
       margin-top:-5px;
       margin-bottom:0;
       background: #222222;
       
   }
}

@media screen and (min-width:768px) and (max-width:992px){
    //设置尾部二维码的位置
    footer{
        .footer-right{
            .wx{
                .er{
                 top:-160px;
                    left:0px;
                 }
            }        
        }                
    }
    //公司简介部分开始
    .company{
         padding:40px 0;
        .company-title{
             h2{
                font-size: 25px;
            }
            .title-p{
                font-size: 20px;
            }
        }
        .company-left{         
            p{
                font-size: 16px;
                text-indent: 12px;
            }
        }
        .company-right{
            img{
                width:100%;
               
            }
        }
    }
    //公司简介部分结束
    
    //人才招聘部分开始
    .personnel{
        padding:50px 0;
        .personnel-left{
            h2{
            font-size: 22px;
            font-weight: bold;
            }
            p{
               font-size: 15px; 
            }
        }
        .personnel-right{
            margin-top:20px;
            div{
                width:150px;
                height:40px;
                background: #ffffff;
                color:#8cc11f;
                text-align: center;
                line-height: 40px;
                border-radius: 6px;
                font-size:14px;
                margin-bottom: 7px;
            }
        }
        
    }
    //人才招聘部分结束
    
    //招聘信息部分开始
    .recruit{
        .recruit-big{
            margin-bottom:40px;
        }
        .recruit-box{
            padding-bottom:30px;
        }
        padding:20px 0;
        h3{
            font-size: 25px;
            margin-bottom: 30px;
        }
        .rectuit-content{
            margin-bottom:40px;
            h4{
                font-size: 18px;
                
            }
            p{
                font-size: 14px;
                text-indent: 20px;
            }
        }
    }
    
    //招聘信息部分结束
    
    //联系方式部分开始
    .contact{
        h3{
            font-size: 24px;
        }
        .contact-box{     
            img{
                margin-left: 20px;
            }
            p{
                font-size: 14px;
                line-height: 35px;
                padding-left:70px;
                
            }
            
        }
    }
    
    //联系方式部分结束
}
@media screen and (max-width:768px){
    //设置尾部二维码的位置
    footer{
        .footer-right{
            margin-top:20px;
            .wx{
                .er{
                 top:-160px;
                    left:-5px;
                 }
            }        
        }                
    }
    
}
@media screen and (min-width:375px){
    //联系方式部分开始
    .contact{
        .contact-box{     
            img{
                margin-left: 20px;
            }
            p{
                font-size: 12px;
                line-height: 35px;
                padding-left:70px;
                
            }
            
        }
    }
    
    //联系方式部分结束
}
